<!--表单设计器结构树-->
<template>
  <div class="form-designer-structure-tree" @click="treeWrapperClickHandler">

    <div class="structure-tree-body">
      <Tree :data="formStructureTreeData" :render="renderContent" :empty-text="'结构树暂无数据'"
            show-checkbox
            :check-strictly="false"
            :check-directly="false"
            @on-select-change="onSelectNodeHandler"
            @on-check-change="onCheckChangeHandler"></Tree>

      <v-contextmenu ref="layoutItemContextmenu">
        <v-contextmenu-item @click="deleteLayoutItem(false)"><Icon type="md-trash" size="15"/> 删除</v-contextmenu-item>
      </v-contextmenu>
    </div>

    <div class="structure-tree-footer">
      <Tooltip content="删除勾选的项" placement="top">
        <span class="tool-btn"
              :class="{'disabled': currentSelectNodes.length == 0}"
              @click.stop="deleteLayoutItem(true)"><Icon type="md-trash" size="16"/></span>
      </Tooltip>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import {createHelpers} from 'vuex-map-fields';
const {mapFields} = createHelpers({
  getterType: 'designer/getField',
  mutationType: 'designer/updateField',
});
export default {
  name: "FormDesignerStructureTree",
  props: {},
  data() {
    return {
      currentSelectComponentName: '',
      currentSelectNodes: []
    }
  },
  mounted() {

  },
  methods: {
    renderContent(h, { root, node, data }) {
      return h('span', {
        style: {
          margin: '0px',
          cursor: 'pointer',
          backgroundColor: this.currentSelectLayoutItemId == data.layoutItemId ? '#1c1c1e': '',
          padding: '1px 5px 0px 5px',
          borderRadius: '3px',
          display: 'inline-block',
          verticalAlign: 'top',
          fontSize: '14px',
          zIndex: 1
        },
        props: {

        },
        directives: {

        },
        on: {
          click: (event) => {
            event.stopPropagation()
            this.onSelectNodeHandler(data)
          },
          contextmenu: (event) => {
            event.preventDefault()
            if (this.currentSelectLayoutItemId && this.currentSelectLayoutItemId == data.layoutItemId) {
              this.$refs.layoutItemContextmenu.show(this.$DesignerCommonUtil.calculateContextmenuPosition(event.pageX, event.pageY, this.$(this.$refs.layoutItemContextmenu.$el).outerHeight()))
            }
          }
        }
      }, data.title)
    },
    onCheckChangeHandler(selected) {
      this.currentSelectNodes = selected
      console.log(this.currentSelectNodes)
    },
    treeWrapperClickHandler() {
      this.$refs.layoutItemContextmenu.hide();
      this.currentSelectComponentName = '';
      this.$store.commit('designer/setCurrentSelectLayoutItemId', '');
      this.$store.commit('designer/setRightSidebarFuncCompConfigFormName', '');
    },
    onSelectNodeHandler(node) {
      this.$refs.layoutItemContextmenu.hide();
      if (this.currentSelectLayoutItemId != node.layoutItemId) {
        this.currentSelectComponentName = node.componentName
        this.$store.commit('designer/setCurrentSelectLayoutItemId', node.layoutItemId);

        this.$store.commit('designer/setRightSidebarFuncCompConfigFormName', 'NullForm');
        setTimeout(()=>{

          if (node.componentName) {
            this.$store.commit('designer/setRightSidebarFuncCompConfigFormName', node.componentName + 'Form');
          }
        }, 50);
      }
    },
    deleteLayoutItem(multiple) {
      // if (this.currentSelectComponentName == 'GridColWidget') {
      //   this.$Message.info('栅格列不允许通过此方式删除')
      //   return false
      // }
      if (multiple) {
        if (this.currentSelectNodes.length > 0) {
          let ids = this.currentSelectNodes.map((o)=>{return o.layoutItemId})
          this.$DesignerCommonUtil.layoutItemDelete(ids, true)
        }
      }else {
        this.$DesignerCommonUtil.layoutItemDelete([this.currentSelectLayoutItemId], false)
      }
    },
  },
  computed: {
    ...mapFields({
      pageMetadata: 'pageMetadata',
      layoutItems: 'pageMetadata.layout.layoutItems',
      currentSelectLayoutItemId: 'currentSelectLayoutItemId'
    }),
    formStructureTreeData () {
      let treeData = [];

      let buildData = (layoutItem, treeData) => {
        let node = {
          layoutItemId: layoutItem.id,
          title: layoutItem.aliasName ? layoutItem.aliasName : layoutItem.component.name,
          componentName: layoutItem.component.name,
          expand: true,
          // selected: this.currentSelectLayoutItemId == layoutItem.id ? true : false
        }
        treeData.push(node)

        node.children = []
        layoutItem.children.forEach(item => {
          let childNode = {
            layoutItemId: item.id,
            title: item.aliasName ? item.aliasName : item.component.name,
            componentName: item.component.name,
            expand: true,
            // selected: this.currentSelectLayoutItemId == item.id ? true : false,
            children: []
          }
          node.children.push(childNode)
          item.children.map(child => {
            buildData(child, childNode.children)
          })
        })
      }

      this.layoutItems.forEach(layoutItem => {
        buildData(layoutItem, treeData)
      })

      return treeData
    }
  },
  watch: {

  }
}
</script>

<style scoped>
>>> .ivu-tree-title {
  padding: 0;
}
</style>

<style lang="less" scoped>
.form-designer-structure-tree {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #424242;

  .structure-tree-body {
    width: 100%;
    height: calc(100% - 33px);
    padding: 10px 10px 33px 10px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .structure-tree-footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 33px;
    background-color: #2E2E2E;
    text-align: center;
    line-height: 33px;
  }

  .tool-btn {
    padding: 5px;
    cursor: pointer;
    &:hover {
      background-color: #2196f3;
      border-radius: 3px;
    }
    &.disabled {
      opacity: 0.55;
      cursor: not-allowed;
      &:hover {
        background-color: inherit;
      }
    }
  }
}
</style>
